<template>
  <div style="padding: 0px 15px;" class="overflowY">
    <div style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">
      <el-row>
        <el-col :span="16">
            <span>设置成员类型: </span>
            <span style="display: inline-block; width: 200px;padding-left: 5px">
              <el-select v-model="selectMemberType" size="small">
                  <el-option
                    v-for="item in memberTypeOptions"
                    :key="item.key"
                    :label="item.value"
                    :value="item.key">
                  </el-option>
                </el-select>
            </span>
        </el-col>
      </el-row>
      <el-row style="padding-top: 15px">
        <el-col>
          <el-input placeholder="搜索用户名称" @keyup.enter.native="fetchData" prefix-icon="el-icon-search" size="small" v-model="queryCondition.name"></el-input>
        </el-col>
      </el-row>
    </div>
    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table ref="singleTable" :data="tableData" tooltip-effect="dark"
                @row-contextmenu="rowContextmenu"
                @cell-dblclick="cellClick"
                @row-click="rowClick"
                @sort-change="sortChange"
                :highlight-current-row="true" height="300" style="width: 100%"
                @selection-change="handleSelectionChange" class="myTable">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * queryArgs.rowBounds.limit + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column type="selection" :selectable="dataSelectable" prop="myCheck" width="50" ></el-table-column>
        <el-table-column label="用户名称" prop="name" width="100" align="left"></el-table-column>
        <el-table-column label="登录名" prop="loginName" width="100" align="left"></el-table-column>
        <el-table-column label="所在机构" prop="org_name" width="150" align="left" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="性别" prop="gender" width="80" align="center" sortable="custom">
          <template slot-scope="scope">
            <span>{{scope.row.gender | genderFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column label="排序号" prop="orderNo" width="100" align="left" sortable="custom"></el-table-column>
        <el-table-column label="用户名称英文" prop="nameEn" width="150" align="left" sortable="custom"></el-table-column>
        <el-table-column label="用户编码" prop="code" width="150" align="left" sortable="custom"></el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange" :current-change="pagingQuery" :page-sizes="pageSizes" :total-num="pagingArgs.totalCount"></paging>
      </div>
    </div>
    <div class="menu-navbar">
      <el-button type="success" size="small" icon="el-icon-success" @click="saveData">保 存</el-button>
      <el-button type="info" size="small" icon="el-icon-close" @click="closeComponent">取 消</el-button>
    </div>
  </div>
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页
import { queryUserAndOrgList } from '@/api/systemManage/sysUserInfo'

const genderKeyValue = {
  '0': '未知',
  '1': '男',
  '2': '女'
}

export default {
  name: 'wfBusiAgentListCom',
  data() {
    return {
      pageSizes: [10, 20, 50, 100],
      // 分页参数
      pagingArgs: {
        currentPageNo: 1,
        totalCount: 0
      },
      tableData: [], // 列表数据
      queryArgs: {
        sort: [
          {
            property: 'orderNo',
            direction: 'ASC'
          },
          {
            property: 'loginName',
            direction: 'ASC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 10
        }
      },
      // 查询参数
      queryCondition: {
        name: ''
        // loginName: '',
        // org_name: ''
      },
      memberTypeOptions: [
        {
          key: '0',
          value: '管理成员'
        },
        {
          key: '-1',
          value: '读写成员'
        },
        {
          key: '-2',
          value: '只读成员'
        }
      ],
      existUserIds: [],
      selectMemberType: '-1',
      lastCheckRecord: null,
      checkRecord: [],
      isCheckRow: {}
    }
  },
  components: {
    paging
  },
  props: {
    componentCustomProps: {
      type: Object,
      default: {}
    }
  },
  watch: {
    // 普通的watch监听通的watch监听
  },
  computed: {

  },
  filters: {
    genderFilter(target) {
      return genderKeyValue[target]
    }
  },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {
    let existMemberIds = this.componentCustomProps.existMemberIds
    if (existMemberIds && existMemberIds.length > 0) {
      this.existUserIds = existMemberIds
    }
    //
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    rowClick() {
      // 行单击事件
    },
    cellClick(row, column, cell, event) {
      // 列单击事件
    },
    rowContextmenu(row, column, e) {
      // 右键菜单
      window.event.returnValue = false
    },
    pageSizeChange(val) {
      this.queryArgs.rowBounds.limit = val
      this.queryArgs.rowBounds.offset = 0
      this.pagingArgs.currentPageNo = 1
      this.fetchData()
    },
    sortChange(col) {
      //
      if (col.prop) {
        let tempDirection = 'ASC'
        if (col.order === 'descending') {
          tempDirection = 'DESC'
        }
        const sort = {
          property: col.prop,
          direction: tempDirection
        }
        this.queryArgs.sort = []
        this.queryArgs.sort.push(sort)
        this.fetchData()
      }
    },
    pagingQuery(val) { // 分页
      this.queryArgs.rowBounds.offset = (val - 1) * this.queryArgs.rowBounds.limit
      this.pagingArgs.currentPageNo = val
      this.fetchData()
    },
    buildQueryConditions() {
      let tempQueryCondition = []

      // 有效状态
      tempQueryCondition.push({
        property: 'status',
        type: 'EQ',
        value: '0'
      })

      for (let key in this.queryCondition) {
        let queryValue = this.queryCondition[key]
        if (queryValue != null && queryValue !== '') {
          let queryProperty = key
          let type = 'LIKE'
          tempQueryCondition.push({
            property: queryProperty,
            type: type,
            value: queryValue
          })
        }
      }
      return tempQueryCondition
    },
    clearQueryConditions() {
      for (let key in this.queryCondition) {
        this.queryCondition[key] = ''
      }
    },
    dataSelectable(row, index) {
      return !this.existUserIds.includes(row.id)
    },
    fetchData() { // 获取内容
      this.queryArgs.condition = this.buildQueryConditions()
      queryUserAndOrgList(this.queryArgs).then(res => {
        let records = res.data.data.records
        this.tableData = records
        this.pagingArgs.totalCount = res.data.data.count
        this.selectRecord = null
      }).catch(() => {

      })
    },
    handleSelectionChange(selection) {
      this.checkRecord = selection
    },
    timeFormat(time) {
      let tempDate = time
      try {
        if (time && time.length > 8) {
          tempDate = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8)
          tempDate += ' ' + time.substring(8, 10) + ':' + time.substring(10, 12) + ':' + time.substring(12, 14)
        }
      } catch (e) {
        //
        console.info(e)
      }
      return tempDate
    },
    saveData() {
      if (this.checkRecord && this.checkRecord.length <= 0) {
        this.$message({
          type: 'warning',
          message: '请选择用户！'
        })
        return
      }
      let data = []
      this.checkRecord.forEach((item, index) => {
        if (item) {
          data.push({
            userId: item.id,
            userName: item.name
          })
        }
      })
      this.$emit('closeComponent', 'save', {
        memberType: this.selectMemberType,
        memberUserList: data
      })
    },
    clearData() {
      this.$emit('closeComponent', 'clear')
    },
    closeComponent() {
      this.$emit('closeComponent')
    }
  }
}
</script>
<style scoped>

.size{
  padding:4px;
}

.searchBoxList{
  margin-top: 10px;
}
.searchGroup_list .searchListName{
  font-size: 14px;
  color: #333333;
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
  width: 100%;
  text-align: left;
  padding-right: 8px;
}

.myDialog{
  padding: 0px;
}
.menu-navbar{
  padding-top: 10px;
}
/*.myTable >>> .customCheck .el-checkbox{*/
  /*display: none;*/
/*}*/
</style>

